<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head th:include="common/header"></head>
<body>
	<div class="layui-fluid">

		<!-- 导航菜单 -->
		<div th:replace="common/system/system_fragment :: system_menu('支付宝生活号')"></div>

		<!-- 当前位置 -->
		<div th:replace="common/system/system_fragment :: system_location('支付宝生活号', '关键字管理')"></div>
		
		<div class="layui-row yy-margin-top-10">
			<!-- 查询 -->
			<div class="layui-collapse" lay-accordion="lay-accordion">
				<div class="layui-colla-item">
					<h2 class="layui-colla-title">查询</h2>
					<div class="layui-colla-content layui-show">
						<div class="layui-form layui-form-pane">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label layui-bg-orange">标题</label>
									<div class="layui-input-inline">
										<input type="text" name="title" autocomplete="off" class="layui-input" maxlength="20">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label layui-bg-orange">KEYCODE</label>
									<div class="layui-input-inline">
										<input type="text" name="keycode" autocomplete="off" class="layui-input" maxlength="20">
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-inline">
										<button class="layui-btn yy-float-right" onclick="queryMethod();">查询</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="layui-row">
			<a class="layui-btn yy-margin-top-10" href="javascript:show();" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'keyword:show'}">
				<i class="layui-icon">&#xe65d;</i> 查看
			</a>
		
			<a class="layui-btn yy-margin-top-10" th:href="@{'/keyword/keywordform/-1'}" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'keyword:add'}">
				<i class="layui-icon">&#xe654;</i> 添加
			</a>
			
			<a class="layui-btn yy-margin-top-10" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'keyword:update'}" onclick="edit();">
				<i class="layui-icon">&#xe642;</i> 编辑
			</a>
			
			<a class="layui-btn layui-btn-danger yy-margin-top-10" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'keyword:delete'}" onclick="del();">
				<i class="layui-icon">&#xe640;</i> 删除
			</a>
			
			<!-- 表格 -->
			<table id="keywordTable" class="yy-margin-top-10"></table>
		</div>
		
	</div>

	<!-- 引入js -->
	<div th:replace="common/script"></div>
	
	<script th:inline="none">
	/*<![CDATA[*/
	
	var tableObj;
	var table;
	
	//查询
	var queryMethod = function(){
		
		var key = $("input[name=keycode]").val();
		var title = $("input[name=title]").val();
		
		$.logs.info(key);
		$.logs.info(title);
		
		tableObj.reload({
			where:{
				title:title,
				keycode:key
			}
		});
	};
	
	;!function(){
		
		table = layui.table;
		
		tableObj = table.render({
			elem:"#keywordTable",
			id:"keywordTable",
			loading:true,
			url:"/keyword/keywordTable",
			skin:"line",
			even:true,
			cols:[[
				{field:"id", title:"id", width:0, fixed:'left', checkbox:true},
				{field:"title", title:"标题", width:200, fixed:true},
				{field:"keycode", title:"KEYCODE", width:100},
				{field:"operation", title:"操作类型", width:120, sort:true, templet:'#operationTemp'},
				{field:"type", title:"消息类型", width:120, sort:true, templet:'#msgTemp'},
				{field:"create_date", title:"创建日期", width:110, sort:true},
				{field:"update_date", title:"更新日期", width:110, sort:true}
			]],
			page:true,
			height:'full',//自适应高度，数据多高表格多高
			limits:[10,30,50,100],
			limit:10,
			size:'lg'
		});
	}();

	//删除
	function del(){
		var checkStatus = table.checkStatus('keywordTable');
		if(checkStatus.data.length <= 0 || checkStatus.data.length > 1){
			$.prompt.alert("请选择并且只能选择一条数据!");
			return;
		}
		var id = checkStatus.data[0].id;
		$.prompt.delPromptBox("确定要删除吗？", "/keyword/delkeyword/"+id, tableObj);
	}
	
	//编辑
	function edit(){
		var checkStatus = table.checkStatus('keywordTable');
		if(checkStatus.data.length <= 0 || checkStatus.data.length > 1){
			$.prompt.alert("请选择并且只能选择一条数据!");
			return;
		}
		var id = checkStatus.data[0].id;
		var href="/keyword/keywordform/"+id;
		window.location.href=href;
	}
	
	//查看
	function show(){
		var checkStatus = table.checkStatus('keywordTable');
		if(checkStatus.data.length <= 0 || checkStatus.data.length > 1){
			$.prompt.alert("请选择并且只能选择一条数据!");
			return;
		}
		var id = checkStatus.data[0].id;
		var href="/keyword/show/"+id;
		window.location.href=href;
	}
	
	/*]]>*/
	</script>
	
	<script type="text/html" id="operationTemp">
	{{#  if(d.operation == 1){ }}
		<span class="yy-text-color-red">调用服务</span>
	{{#  } else if(d.operation == 2) { }}
		<span class="yy-text-color-blue">发送消息</span>
	{{#  } }}
	</script>
	
	<script type="text/html" id="msgTemp">
	{{#  if(d.type == 1){ }}
		<span class="yy-text-color-red">文本消息</span>
	{{#  } else if(d.type == 2) { }}
		<span class="yy-text-color-blue">图文消息</span>
	{{#  } }}
	</script>
	
</body>

</html>